<template>
  <div id="myWorks">
    <van-nav-bar class="header"
                 fixed
                 :border="false"
                 @click-left="diffBack">
      <div class="left"
           slot="left">
        <van-icon name="arrow-left"
                  size="24px"
                  color="#fff" />
      </div>
      <div class="title"
           slot="title">我的作品</div>
    </van-nav-bar>
	<!-- 保存图片到本地 -->
	<download :showDown="showPreview" :url="imgUrl"></download>
    <div class="main">
      <div class="worksList">
        <!-- <div class="month wordsGray">{{items.month}}</div> -->
        <div class="imgList">
          <div class="worksImg"
               v-for="(item,index) in list"
               :key="index">
            <div class="imag"
                 @click="imageClick(index)">
              <img v-lazy="item.shortImgUrl"
                   alt=""
                   height="100%"
                   width="100%">
            </div>
          </div>
        </div>
      </div>
      <div class="nomore">
        <div class="line"></div>
        <div class="say">没有更多作品</div>
        <div class="line"></div>
      </div>
    </div>
    <van-image-preview v-model="showPreview"
                       :images="images"
                       :startPosition="index"
                       @change="onChange">
    </van-image-preview>
  </div>
</template>
<script>
import download from '@/components/performance/msgCenter/download' //下载图片
import { getuserUid } from "@/utils/auth";
import {getRole} from '@/utils/auth.js'
export default {
  components:{
	download  
  },
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      showPreview: false,
      images: [],
      index: 0,
	  imgUrl:""
    };
  },
  mounted() {
    this.getUserWorks();
  },
  created(){
	//角色id
	this.roleId = getRole()?getRole():'';  
  },
  methods: {
    diffBack() {
      this.$router.push("/designer/personalCenter");
    },
	//图片点击事件
	imageClick(n){
		//订单完成
		if(this.list[n].orderStatus == 5){
			this.show_preview(n);
		}
		//订单未完成
		else{
			this.$dialog.confirm({
				title: '提醒',
				message: '查看该图需先结算收图',
				confirmButtonText:this.roleId==1?'去结算':'确定'
			})
			.then(() => {
				this.showPreview = false;
				this.$store.commit("setorderUid", this.list[n].orderUid);
				this.$router.push('/designer/orderDetail');
			})
			.catch(() => {
				this.showPreview = false;
			});
		}
	},
	//预览图片
    show_preview(index) {
      this.images = [];
	  this.imgUrl = this.list[index].imageUrl;
      for (let i of this.list) {
        this.images.push(i.imageUrl);
      }
      this.showPreview = true;
      this.index = index;
    },
    onChange(index) {
      this.index = index;
	  this.imageClick(index);
    },
    //获取个人中心
    async getUserWorks() {
      const e = await HTTP("myWorkCenter", {
        userUid: getuserUid(),
        // userUid: "834532c343a911e9855d6045cb8a6181",
        months: 6
      });
      // console.log(e);
      if (e.code == 200) {
        this.list = e.data;
      } else {
        this.$toast(e.msg || "服务器异常");
        return;
      }
    },
  }
};
</script>

<style lang="scss" scoped>
#myWorks {
  .header {
    background: $color-primary;
    color: #ffffff;
    .title {
      color: #ffffff;
    }
  }
  .main {
    margin-top: 46px;
    padding: 0.4rem 0.24rem;
    .worksList {
      .month {
        font-size: 0.26px;
      }
      .imgList {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.1rem;
        .worksImg {
          position: relative;
          .imag {
            width: 100%;
            height: 100%;
          }
          width: 1.68rem;
          height: 1.68rem;
          margin: 0.1rem 0.1rem 0 0;
          &:nth-child(4n) {
            margin-right: 0;
          }

          .vcheckbox {
            position: absolute;
            bottom: 0.06rem;
            right: 0.06rem;
          }
        }
      }
    }
    .nomore {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 0.3rem;
      .say {
        text-align: center;
        color: #aaaaaa;
        z-index: 101;
        background: #f9f9f9;
      }
      .line {
        top: 0.15rem;
        height: 1px;
        width: 2rem;
        background: #e5e5e5;
      }
    }
  }
}
</style>
